<template>
  <mt-popup
    style="width:100%;height:100%"
    v-model="selectBranchVisible"
    position="right">
    <div class="page selectBranch">
      <div class="scroll-view">
        <customHeader  middleTitle="选择支行" @leftCallBack="back"  />
        <searchBar @search="searchCallback" :clearVal="clearValues"   cityholder="请填写城市名" />
        <div class="page-body">
          <div class="list">
            <div :class="`list-item ${(index+1) == (searchValue?searchResult:result).length?'last-list-item':''}`" v-for="(item,index) in (searchValue?searchResult:result)" :key="index" @click="()=>select(item)">
              {{item.value}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </mt-popup>
</template>

<script>
import Vue from "vue";
import customHeader from "../../components/header/header";
import searchBar from "../../components/searchBar/searchBar";
import { Popup, Search } from "mint-ui";


export default {
name: "selectBranch",
data() {
  return {
    searchValue:'',
    searchResult:[],
    result:[],
    clearValues:'0'
  };
},
props: {
  selectBranchVisible: Boolean,
  listData:Array,
  defaultData:String,
},
watch:{
  selectBranchVisible(val){
    if(val){
      this.clearValues = '0';
    }else{
      this.clearValues = '1';
    }

  },
  listData(val){
    this.result = val;
  }
},
methods: {
  search(val){
    this.searchResult = [];
    this.result.map((item,index)=>{
      if(item.value.indexOf(val)!= "-1"){
        this.searchResult.push(item)
      }
    })
  },
  searchCallback(val) {
    this.searchValue = val;
    this.searchResult = [];
    this.result.map((item,index)=>{
      if(item.value.indexOf(val)!= "-1"){
        this.searchResult.push(item)
      }
    })
  },
  select(params){
    this.searchValue = '';
    this.$emit("selectBranch",params);
  },
  back(){
    this.searchValue = '';
    this.$emit("selectBranchBack");
  }
},
computed: {},
components: {
  customHeader,
  searchBar
}
};
</script>
<style lang='scss' scoped>
@import "openPayment";
</style>
<style lang='scss' >
@import "openPayment";
.searchInput{
  background: #fff;
  .mint-searchbar{
    background: #fff;
    .mint-searchbar-inner{
      background: #F8F8F8;
    }
    .mint-searchbar-core{
      background: #F8F8F8;
    }
    .mintui-search{
      background: #F8F8F8;
    }
  }
}
</style>
